<template>
	<view>
		<!-- <image :src="grade[0].img" mode=""></image> -->
		<!-- 等级 -->
		<view class="grade" v-for="(item, index) in grade" :key="index"
			:style="{ backgroundImage: 'url(' + item.imageUrl + ')' }">
			<!-- <image src="../../static/img/buyVIP/goldBg.png" mode=""></image> -->
			<view class="title" :style="{ backgroundImage: 'url(' + item.topimg + ')' , color: item.fontColor}">
				当前等级
			</view>
			<view class="center">
				<view class="center_left" :style="{color: item.fontColor}">
					Lv.{{index+1}} {{item.grade}}
				</view>
				<view class="diff" :style="{color: item.fontColor}">
					还差{{item.val}}积分，可升级至{{grade[index+1].grade?grade[index+1].grade:'至尊会员'}} </view>
			</view>
			<!-- 进度条 -->
			<view class="progress-bar-container">
				<view class="progress-bar" style="width: 50%;" :style="{backgroundColor: item.fontColor}"></view>
			</view>
			<!-- 积分 -->
			<view class="integral" :style="{color: item.fontColor}">
				<view class="left">
					<image :src="item.icon" mode="" class="icon"></image>
					<view>{{item.val}}/1000</view>
				</view>
				<view class="right">购买商品，升级会员享受更多权益</view>
			</view>
			<image class="sign" :src="item.img" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				grade: [{
						img: "/static/img/buyVIP/ordinary.png",
						imageUrl: "/static/img/buyVIP/ordinaryBg.png",
						topimg: "/static/img/buyVIP/ordinaryAt.png",
						icon: "/static/img/buyVIP/iconO.png",
						fontColor: "#a3732a",
						grade: "普通会员",
						val: 500
					},
					{
						img: "/static/img/buyVIP/silver.png",
						imageUrl: "/static/img/buyVIP/silverBg.png",
						topimg: "/static/img/buyVIP/silverAt.png",
						icon: "/static/img/buyVIP/iconS.png",
						fontColor: "#4874a9",
						grade: "白银会员",
						val: 500
					},
					{
						img: "/static/img/buyVIP/gold.png",
						imageUrl: "/static/img/buyVIP/goldBg.png",
						topimg: "/static/img/buyVIP/goldAt.png",
						icon: "/static/img/buyVIP/iconG.png",
						fontColor: "#a3732a",
						grade: "黄金会员",
						val: 500
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.grade {
		width: 690rpx;
		height: 360rpx;
		border-radius: 30rpx;
		/* border: 1rpx #808080 solid; */
		margin: 16rpx auto;
		background-size: cover;
		/* 背景图片覆盖整个元素区域 */
		background-position: center;
		/* 背景图片居中 */
		position: relative;
	}

	.grade .title {
		width: 160rpx;
		height: 50rpx;
		background-size: cover;
		/* 背景图片覆盖整个元素区域 */
		background-position: center;
		/* 背景图片居中 */
		/* text-align: center; */
		padding-left: 26rpx;
		font-size: 24rpx;
		/* 		position: absolute;
		z-index: 2;
		top: 0;
		left: 0; */
	}

	.grade .sign {
		display: block;
		position: absolute;
		top: 60rpx;
		right: 40rpx;
		width: 180rpx;
		height: 160rpx;
	}

	.grade .center {
		margin-left: 40rpx;
		margin-top: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.diff {
		font-size: 25rpx;
		font-weight: 400;
	}

	.progress-bar-container {
		margin: 100rpx auto 0;
		width: 620rpx;
		background-color: #fff;
		border-radius: 2px;
		overflow: hidden;
	}

	.progress-bar {
		height: 5px;
		background-color: #5cb85c;
		text-align: center;
		line-height: 20px;
		color: white;
		border-radius: 4px;
		transition: width 0.5s ease;
	}

	.integral {
		display: flex;
		margin: 10rpx auto;
		width: 620rpx;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.integral .left {
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.integral .left .icon {
		display: block;
		width: 25rpx;
		height: 25rpx;
		margin-right: 20rpx;
	}
</style>